<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<style>
form[id=unitfm] label {padding-right: 20px;} 
</style>
<script type="text/javascript">
var currentDistrictTreeNode;
var currentBlockTreeNode;
var unitUrl;
var districtTree = $('#distrctTree');
	$(function() {

		$('#unitAll').datagrid({
			pageSize : 200,
			pageList : [ 200 ],
			toolbar : "#addUnit"
		});
		refreshDistricTree();
	})
	//刷新全树
	function refreshDistricTree() {
		//获取所有区域
		$.ajax({
					type : "POST",
					url : "${pageContext.request.contextPath}/district/viewTreeDistrictsJson.html",
					dataType : "json",
					success : function(json) {
						districtTree
								.tree(
										{
											data : json.rows,
											lines : true,
											url : "${pageContext.request.contextPath}/block/getTreeBlocksJson.html",
											onClick : function(node) {
												if ($(this).tree('isLeaf',
														node.target)) {
													$("#unitAll")
															.datagrid(
																	{
																		url : 'unit/getAllUJsonByBlockId/'
																				+ node.id
																				+ '.html',
																		method : 'get'
																	});
													currentBlockTreeNode = node;
												} else {
													$(this).tree('toggle',
															node.target);
													currentDistrictTreeNode = node;
												}
											},
											loadFilter : function(data) {
												if (data.rows) {
													return data.rows;
												} else {
													return data;
												}
											}
										});

					}
				});
	}

	
	function settingDistrict(mark){
		$.ajax({
			type : "POST",
			url : "district/viewDistrictsJsonForForm.html",
			dataType : "json",
			success : function(json) {
				$("#"+mark).combobox({
					data : json.rows,
					valueField : 'bha_id',
					textField : 'bhaName',
				});
				$("#"+mark).combobox('setValue', currentDistrictTreeNode.id);
				$("#"+mark).combobox('setText', currentDistrictTreeNode.text);
				$("#"+mark).combobox('select', currentDistrictTreeNode.id);
			}
		});
	}
	
	
	function settingBlock(){
		$.ajax({
			type : "POST",
			url : "block/getTreeBlocksJson.html?id="+currentDistrictTreeNode.id,
			dataType : "json",
			success : function(json) {
				$("#blockid2").combobox({
					data : json.rows,
					valueField : 'blockId',
					textField : 'blockName',
				});
				$("#blockid2").combobox('setValue', currentBlockTreeNode.id);
				$("#blockid2").combobox('setText', currentBlockTreeNode.text);
				$("#blockid2").combobox('select', currentBlockTreeNode.id);
			}
		});
	}
	
	// 小区
	function newDistrict() {
		$("#districtfm  input").val('');
		$("#districtDLG").dialog('open');
	}

	function saveDistrict() {
		$('#districtfm').form('submit', {
			onSubmit : function() {
				return $(this).form('validate');
			},
			success : function(result) {
				var result = eval('(' + result + ')');
				if (result.errorMsg) {
					$.messager.show({
						title : 'Error',
						msg : result.errorMsg
					});
				} else {

					$('#districtDLG').dialog('close'); // close the dialog
					refreshDistricTree();
					$.messager.show({
						title : '成功',
						msg : "数据添加成功"
					});
				}
			}
		});
	}

	//板块
	function newBlock() {
		if (currentDistrictTreeNode &&  typeof(currentDistrictTreeNode) != "undefined") {
			$("#blockfm input").val('');
			settingDistrict("bhaId4");
			$("#blockDLG").dialog('open');
		}  else {
			 $.messager.show({
				 title: '提示',
				 msg: "请选择一个区域"
				 });
		}
	}
	
	function saveBlock() {
		currentDistrictTreeNode = districtTree.tree('find',$('#bhaId4').combo('getValue')); 
		$('#blockfm').form('submit', {
			onSubmit : function() {
				return $(this).form('validate');
			},
			success : function(result) {
				var result = eval('(' + result + ')');
				if (result.errorMsg) {
					$.messager.show({
						title : 'Error',
						msg : result.errorMsg
					});
				} else {

					$('#blockDLG').dialog('close'); // close the dialog
					districtTree.tree('reload',currentDistrictTreeNode.target);
					$.messager.show({
						title : '成功',
						msg : "数据添加成功"
					});
				}
			}
		});
	}
	//小区
	function newUnit() {
		if ( typeof(currentDistrictTreeNode) == "undefined"){
			 $.messager.show({
				 title: '提示',
				 msg: "请选择一个区域"
				 });
		} else  if (typeof(currentBlockTreeNode) == "undefined" ) {
			
			 $.messager.show({
				 title: '提示',
				 msg: "请选择一个板块"
				 });

		}  else {
			$("#unitfm input").val('');
			$("#unitId").val(0);
			settingDistrict("bhaId5");
			settingBlock();
			unitUrl = "${pageContext.request.contextPath}/unit/addUnit.html";
			$("#unitDLG").dialog('open');
		}
	}
	
	function saveUnit() {
		$('#unitfm').form('submit', {
			url:unitUrl,
			onSubmit : function() {
				return $(this).form('validate');
			},
			success : function(result) {
				var result = eval('(' + result + ')');
				if (result.errorMsg) {
					$.messager.show({
						title : 'Error',
						msg : result.errorMsg
					});
				} else {

					$('#unitDLG').dialog('close'); // close the dialog
					$('#unitAll').datagrid('reload'); 
					$.messager.show({
						title : '成功',
						msg : "数据添加成功"
					});
				}
			}
		});
	}
	
	function editUnit(){
		 var row = $('#unitAll').datagrid('getSelected');
		 if (row){ 
			 $('#unitDLG').dialog({title:'编辑小区'});
			 settingDistrict("bhaId4");
			 settingBlock();
			 fillData(row);
			 $("#unitDLG").dialog('open');
		 } else {
			 $.messager.show({
				 title: '提示',
				 msg: "请选择一条数据"
				 });
		 }
	}
	
	/**
	*
	* 填充数据
	**/
	function fillData(row) {
		//id
		$("#unitId").val(row.unitId);
		$("#unitName").val(row.unitName);
		$("#unitAddress").val(row.unitAddress);
		$("#unitAddress").val(row.unitAddress);
		$("#pingyin").val(row.pingyin);
		$("#pingyin2").val(row.pingyin2);
		unitUrl = "${pageContext.request.contextPath}/unit/modifyUnit.html";
	}
		 
</script>
<div
	style="width: auto; margin-bottom: 3px; height: 30px; border: 1px solid #ddd; padding-top: 3px;">
	<a href="javascript:void(0)" class="easyui-linkbutton"
		iconCls="icon-add" plain="true" onclick="newDistrict()">添加区域</a> <a
		href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add"
		plain="true" onclick="newBlock()">添加板块</a>
</div>
<div class="easyui-layout" style="width: auto; height: 450px;">
	<div data-options="region:'west',split:true" title="区域/板块管理"
		style="width: 200px;">
		<ul id="distrctTree" class="easyui-tree">
		</ul>

	</div>
	<div data-options="region:'center',title:'小区管理'">
		<table id="unitAll" class="easyui-datagrid"
			style="width: auto; height: 380px;" singleSelect="true"
			pagination="true" pagePosition="both" fitColumns="true"
			rownumbers="true">
			<thead>
				<tr>
					<th data-options="field:'unitName',width:200">小区名称</th>
					<th data-options="field:'unitAddress',width:100">地址</th>
					<th data-options="field:'blockName',width:100">所属板块</th>
					<th data-options="field:'districtName',width:100">所属区域</th>
					<th data-options="field:'pingyin',width:100">拼音缩写1</th>
					<th data-options="field:'pingyin2',width:100">拼音缩写2</th>
				</tr>
			</thead>
		</table>
	</div>

</div>
<div id="addUnit">
	<a href="javascript:void(0)" class="easyui-linkbutton"
		iconCls="icon-add" plain="true" onclick="newUnit()">添加</a> <a
		href="javascript:void(0)" class="easyui-linkbutton"
		iconCls="icon-edit" plain="true" onclick="editUnit();">修改</a>
</div>
<!-- 新建区域 -->
<div id="districtDLG" class="easyui-dialog"
	style="width: 400px; height: 200px; padding: 10px 20px" closed="true"
	title="新建区域">
	<form id="districtfm" method="post">
		<div class="ftitle">区域基本信息</div>
		<div class="fitem">
			<label>区域名称:</label> <input name="bha_name" id="districtName"
				class="easyui-validatebox"
				data-options="required:true,validType:'length[1,10]'" />
		</div>
		<div class="ftitle"></div>
		<div id="dlg-buttons" style="text-align: right;">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-ok" onclick="saveDistrict()">保存</a> <a
				href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-cancel"
				onclick="javascript:$('#districtDLG').dialog('close')">取消</a>
		</div>
	</form>
</div>
<!-- 新建板块 -->
<div id="blockDLG" class="easyui-dialog"
	style="width: 400px; height: 200px; padding: 10px 20px" closed="true"
	title="新建板块">
	<form id="blockfm" method="post"
		action="${pageContext.request.contextPath}/block/addBlock.html">
		<div class="ftitle">板块基本信息</div>
		<div class="fitem">
			<label>区域名称:</label> <select name="bhaid" id="bhaId4"
				data-options="editable:false">
			</select>
		</div>
		<div class="fitem">
			<label>板块名称:</label> <input name="blockName" id="bolckName"
				class="easyui-validatebox"
				data-options="required:true,validType:'length[1,10]'" />
		</div>
		<div class="ftitle"></div>
		<div id="dlg-buttons" style="text-align: right;">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-ok" onclick="saveBlock()">保存</a> <a
				href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-cancel"
				onclick="javascript:$('#blockDLG').dialog('close')">取消</a>
		</div>
	</form>
</div>

<!-- 新建小区 -->
<div id="unitDLG" class="easyui-dialog"
	style="width: 600px; height: 270px; padding: 10px 20px" closed="true"
	title="新建小区">
	<form id="unitfm" method="post">
		<input type="hidden" name="unitId" id="unitId" value="0"/>
		<div class="ftitle">小区基本信息</div>
		<div class="fitem">
			<label>区域名称：</label> <select name="bhaid2" id="bhaId5"
				data-options="editable:false,readonly:true">
			</select>
			<label>板块名称：</label> <select name="blockid2" id="blockid2"
				data-options="editable:false,readonly:true">
			</select>
		</div>
		<div class="fitem">
			<label>小区名称：</label> 
			<input name="unitName" id="unitName"
				class="easyui-validatebox"
				data-options="required:true,validType:'length[1,20]'" />
			<label>地址：</label> 
			<input name="unitAddress" id="unitAddress"
				class="easyui-validatebox"
				data-options="required:true,validType:'length[1,20]'" />
		</div>
		<div class="fitem">
			<label>拼音缩写1：</label> 
			<input name=pingyin id="pingyin"
				class="easyui-validatebox"
				data-options="required:true,validType:'length[1,20]'" />
			<label>拼音缩写2：</label> 
			<input name="pingyin2" id="pingyin2"
				class="easyui-validatebox"
				data-options="required:true,validType:'length[1,20]'" />
		</div>				
		<div class="ftitle"></div>
		<div id="dlg-buttons" style="text-align: right;">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-ok" onclick="saveUnit()">保存</a> <a
				href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-cancel"
				onclick="javascript:$('#unitDLG').dialog('close')">取消</a>
		</div>
	</form>
</div>